<template>
  <a-modal title="操作按钮添加" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="hideModal"
    :maskClosable="false" destroyOnClose width="720px" style="overflow: hidden;"
    :bodyStyle="{maxHeight:'520px',overflow:'auto'}">
    <a-spin :spinning="spinning">
      <a-form-model :model='formData' :rules='rules' ref='myForm' :style="{width:'100%'}" layout='horizontal'
        v-bind='{
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    }' :colon='true' labelAlign='right'>
        <a-row style='height: 100%'>
          <a-col :span='24'>
            <a-form-model-item label='名称' prop='label' v-bind='{}'>
              <a-input v-model='formData.label' placeholder='' :allowClear='true' size='default'
                :disabled='false'></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span='24'>
            <a-form-model-item label='权限标识' prop='permission' v-bind='{}'>
              <a-input v-model='formData.permission' placeholder='' :allowClear='true' size='default'
                :disabled='false'></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span='24'>
            <a-form-model-item label='功能标识' prop='sites' extra='仅在代码生成器有效'  v-bind='{}'>
              <a-select v-model='formData.sites' mode='default' :showSearch='true' placeholder=''
                size='default' :disabled='false'>
                <a-select-option  value='custom'>
                  自定义
                </a-select-option>
                <a-select-option  value='edit'>
                  编辑
                </a-select-option>
                <a-select-option  value='dels'>
                  删除
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='显示颜色' prop='color' v-bind='{}'>
              <a-select v-model='formData.color' mode='default' :showSearch='true' placeholder=''
                size='default' :disabled='false'>
                <a-select-option v-for='(opt,idx) in color_options' :key='idx' :value='opt.value'>
                  {{opt.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      idx: '', // 当前编辑的序号
      spinning: true,
      confirmLoading: false,
      visible: false,
      defaultFormData: {
        label: '',
        permission: '',
        sites: '',
        color: ''
      },
      formData: {},
      rules: {
        label: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }, {
          max: 10,
          message: '名称最大长度不能大于10',
          trigger: 'blur'
        }],
        permission: [{
          max: 20,
          message: '权限标识最大长度不能大于20',
          trigger: 'blur'
        }],
        sites: [{
          required: true,
          message: '功能标识不能为空',
          trigger: 'change'
        }],
        color: [{
          required: true,
          message: '显示颜色不能为空',
          trigger: 'change'
        }]
      },
      color_options: [{
        'label': '主要色',
        'value': '#1890ff'
      }, {
        'label': '成功色',
        'value': '#52c41a'
      }, {
        'label': '警告色',
        'value': '#faad14'
      }, {
        'label': '错误色',
        'value': '#f5222d'
      }]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    showModal(item, idx) {
      this.idx = idx === undefined ? -1 : idx
      this.visible = true
      this.formData = Object.assign({}, this.defaultFormData)
      if (item) {
        this.formData = Object.assign({}, {
          label: item.label,
          // permission: item.permission,
          sites: item.sites,
          color: item.color
        })
      }
      this.spinning = false
    },
    hideModal() {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          this.confirmLoading = false
          console.log('error')
        } else {
          // TODO 提交表单
          this.$emit('success', {
            label: this.formData.label,
            // permission: this.formData.permission,
            sites: this.formData.sites,
            color: this.formData.color,
            event: row => { console.log(row) }
          }, this.idx)
          this.confirmLoading = false
          this.hideModal()
        }
      })
    },
    onReset() {
      this.$refs['myForm'].resetFields()
      this.hideModal()
    }
  }
}

</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper+.ant-checkbox-wrapper {
  margin-left: 0px;
}

</style>
